<template>
  <teleport to="body">
    <div class="toast-host">
      <div
        v-for="t in store.list"
        :key="t.id"
        class="toast"
        :data-type="t.type"
        role="status"
        aria-live="polite"
      >
        {{ t.text }}
      </div>
    </div>
  </teleport>
</template>

<script setup lang="ts">
import { useToast } from '@/composables/useToast'
const { store } = useToast()
</script>

<style scoped>
/* 顶部正中，且不阻塞页面交互 */
.toast-host{
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none; /* 容器不吃事件 */
}

/* 单条提示：宽度随内容，略限最大宽度 */
.toast{
  pointer-events: auto;          /* 单条允许点击（如复制文本） */
  width: max-content;            /* 自适应内容 */
  max-width: min(80vw, 560px);   /* 大屏限制 */
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  user-select: none;
  will-change: transform, opacity;
  animation: slideIn .18s ease-out;
}

/* 颜色主题 */
.toast[data-type="info"]    { background:#3b82f6; }
.toast[data-type="success"] { background:#22c55e; }
.toast[data-type="warning"] { background:#f59e0b; }
.toast[data-type="error"]   { background:#ef4444; }

/* 只动画 Y 轴，别动 X（避免破坏居中） */
@keyframes slideIn {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
</style>
